Webpack + Vue IDE Quick Start

Home

Introduction

This document is a general guid for setting up B/S front end IDE enviroment, using Webpack and Vue.js.

It's highly recommneded to build a knowledge base of morden JavaScript and development tools.
Reference 1 is a quick but perspective survey for beginer although it's written in 2016.
Read 1 & 2 before go through this tutorial if you don't know about 'export', 'import', and bundling or transplie. And 3 (ch 16) is recommended for furthure reading.

In this article, we will start from installing node, through integrating Semantic frame modules, and will finally establish an organization coding / designing convention of application development.

All the steps are illustrated on Ubuntu 16.04 LTS. Readers may needing check official sites from time to time to find out menus for other platforms like MS Windows.

Install Node.js & NPM

About

“Node.js is a packaged compilation of Google’s V8 JavaScript engine, the libuv platform abstraction layer, and a core library, which is itself primarily written in JavaScript.”

The article gives Some examples of where Node shouldn't been used.

Every Package is installed via npm

NPM: The Node Package Manager

npm docs home: Getting Started

Install Node

Difficult in China. Following the official installation doc won't work (sudo curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -), or this at Ask Ubuntu.
Check a hackish way at CSDN.

1. Download Node 10.15.0 LTS
- for version updating, see Node Version Releas Schedule.

2. Unzip

tar -xf node-v10.15.0-linux-x64.tar.xz
sudo cp nodejs /usr/local/bin -r

3. Link

sudo ln -s /usr/local/bin/nodejs-00/bin/npx /usr/bin/npx

ody@infochange:~$ ls /usr/bin/node* -l
lrwxrwxrwx 1 root root 30 Jan 10 12:01 /usr/bin/node -> /usr/local/bin/nodejs/bin/node
ody@infochange:~$ ls /usr/bin/npm* -l
lrwxrwxrwx 1 root root 29 Jan 10 12:01 /usr/bin/npm -> /usr/local/bin/nodejs/bin/npm
ody@infochange:~$ ls /usr/bin/npx* -l
lrwxrwxrwx 1 root root 29 Jan 10 12:01 /usr/bin/npx -> /usr/local/bin/nodejs/bin/npx

4. Check Version

ody@infochange:~$ node -v
v10.15.0
ody@infochange:~$ npm -v
6.5.0

Install webpack

npm install reference

Reference Video (webpack 2.4.1)

Install webpack & webpack-cli globally.

-g: install globally 

        ody@infochange:~$ sudo npm install -g webpack
        /usr/local/bin/nodejs/bin/webpack -> /usr/local/bin/nodejs/lib/node_modules/webpack/bin/webpack.js

        ody@infochange:~$ webpack -v
        4.28.1

        ody@infochange:~$ sudo npm install -g webpack-cli

        /usr/local/bin/nodejs-00/bin/webpack-cli -> /usr/local/bin/nodejs-00/lib/node_modules/webpack-cli/bin/cli.js

        > webpack-cli@3.2.1 postinstall /usr/local/bin/nodejs-00/lib/node_modules/webpack-cli
        > lightercollective

             *** Thank you for using webpack-cli! ***

        Please consider donating to our open collective
             to help us maintain this package.

          https://opencollective.com/webpack/donate

                            ***

        npm WARN webpack-cli@3.2.1 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

        + webpack-cli@3.2.1
        added 210 packages from 129 contributors in 6.675s

Tip: see npm –save or –save-dev. Which one to use?

Example: First Webpack Project (Import JQuery)

With webpack, the jquery can be easyly dependended on.

1. create a basic npm project structure

Initiate a SPA (single page application) project.
In the new project folder,

npm init
Screenshot of final project structure and package.json.

2. install jquery

npm install --save-dev jquery
npm install css-loader style-loader --save-dev
package.json: 
		package.json/dependencies
		"devDependencies": {
			"css-loader": "^2.1.0",
			"style-loader": "^0.23.1"
		}

3. import jquery in js

index.js:

import $ from 'jquery';
$('body').append('<h4>By jquery</h4>');

4. setup webpack.config.js

The basic webpack config can be nothing. Let's configure the output bundle. 

		module.exports = {
			mode: v, // "production" | "development" | "none"

			// Here the application starts executing
			// and webpack starts bundling
			output: {
				// the target directory for all output files
				filename: "bundle.js", // string
			},
		}

5. Use bundle.js

index.html:

<script src='./dist/bundle.js' type='text/javascript'></script>

Then use webpack to transpile the index.js.

usr@project-folder$ webpack

download project final source of this tutorial.

Why Webpack?

Now, the transpile process show us how webpack makes source component published as bundles understood by browser.

Developer now no longer needing consider which html page need which JavaScript modules. It's handled by webpack.

Install Vue.js

About

Vue.js is a JavaScript Framework

Vue.js Guid - installation

Install

sudo npm install --save-dev vue
sudo npm install --save-dev vue-cli

This makes webpack know about Vue.js

package.json: 
		"devDependencies": {
			"css-loader": "^2.1.0",
			"style-loader": "^0.23.1",
			"vue": "^2.5.22",
			"vue-cli": "^2.9.6",
			"vue-loader": "^15.5.1",
			"vue-template-compiler": "^2.5.22"
		}

Import Vue Components

Component is the basic way how Vue.js is working.

Note:
The Vue.js guid provided a basic knowledge base of how to use Vue.js.

index.js:

import Vue from 'vue'
import App from './App.vue'

The finished page shows how vue.js component (App.vue) looks like. It's only a html tag in index.html.

<div id="app"></div>
Module details are handled by Hello.vue.


download project final source of this tutorial.

Integrate with Anclient.js

About

Anclient.js is the JavaScript client of the semantic.jserv framework.

Sample Project

The Anclient.js test can work with help of Vue 2.5.17.

See Anclient.js/test/api-basic/testVue.js function load()

With the help of Anclient.js/Protocol.js, the responded data is bound to vue template.

obj7.groceryList = Protocol.rs2arr(resp.rs[0]);
Where obj7 is the vue instance created when window loaded. 
		obj7 = new Vue({
			el: '#obj-7',
			data: {
				groceryList: [
				{ id: 0, text: 'Vegetables' },
				] }
		});

Troubleshootings

Error Handling
vue init webpack ex01
Command Halt

 That's because vue trying to download chrome driver. Try Chinese way.
Can't resolve vue loader
ERROR in ./src/index.js
Module not found: Error: Can't resolve 'vue-loader' in '... /js/webpack-01'
@ ./src/index.js 8:0-27 24:16-19
 Install vue-loader.
ody@infochange:~/webpack-01$ npm install vue-loader --save-dev
In webpack.config.js:
{test: /\.vue$/, loader: "vue-loader" },
{test: /\.(png|jpg|gif)$/, loader: "file-loader"},
Can not find module 'webpack/lib/RuleSet' 
ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
Error: Cannot find module 'webpack/lib/RuleSet'
 Set node path to where node_modules installed globally.
export NODE_PATH=/usr/local/bin/nodejs/lib/node_modules
Error in ./src/App.vue'
Module build failed ...
Error: [vue-loader] vue-template-compiler must be installed ...
Install file loader
npm install vue-template-compiler --save-dev
Module not found, can't resolve './components/Hello'
Module not found, can't resolve 'file-loader'
Install file loader
npm install file-loader
In webpack.config.js/modules/rule:
{test: /\.vue$/, loader: "vue-loader" },
{test: /\.(png|jpg|gif)$/, loader: "file-loader"},

You are using the runtime-only build of vue where the template compiler is not avialable...

Explaination: Runtime-Compiler not included in bundle.

See the Vue.js document explained why this happening.
And there are many discussion about this: [1], [2], [3],
and there is not much opions.

In webpack.config.js:

resolve: { alias: { vue: 'vue/dist/vue.ems.js' } }
or
import Vue from 'vue/dist/vue.js'
Can't find webpack even after PATH and NODE_PATH been set.
Error: Cannot find module 'webpack'
 Link webpack globally.
npm link webpack
See StackOverFlow

References